/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="cluster-empty-panel__container">
        <img class="empty-img"
             :class="{'small-img':small}"
             src="./img/empty-model.png"
             alt="">
        <span class="empty-title">{{ title }}</span>
        <span class="empty-text">{{ text }}</span>
    </div>
</template>

<script lang=ts>

/**
     * Created by zhb on 2020/9/8.
     */

import { Component, Vue, Prop } from 'vue-property-decorator';

@Component
export default class EmptyPanel extends Vue {
    @Prop({
        type: String,
        default: ''
    }) title!: string
    @Prop({
        type: String,
        default: ''
    }) text!: string
    @Prop({
        type:Boolean,
        default:false
    }) small!: boolean
};

</script>

<style lang="less">
    .cluster-empty-panel__container {
        height: calc(100% - 50px);
        position: relative;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 100%;
        .empty-img{
            width: 270px;
            height: 147px;
            margin-bottom: 10px;
            &.small-img{
                width: 135px;
                 height: 73px;
            }
        }
        .empty-title{
            font-size: 14px;
            color: #14161A;
            margin-bottom: 8px;
        }

        .empty-text {
            color: #A3A3A3;
        }
        /* .empty-content-wrap {
            position: absolute;
            left: 0;
            right: 0;
            top: 50%;
            margin-top: -32px;
            text-align: center;
            color: #999999;
           
        } */
    }
</style>
